<template>
  <p-card class="j-address-list-right-card-box" :loading="cardLoading" :bordered="false">
    <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <p-form layout="inline" @keyup.enter.native="searchQuery">
            <p-row :gutter="24">
                  <p-col :xl="6" :lg="7" :md="8" :sm="24">
                <p-form-item label="文章标题">
                  <p-input placeholder="请输入文章标题" v-model="queryParam.title"></p-input>
                </p-form-item>
              </p-col>
              <p-col :xl="6" :lg="7" :md="8" :sm="24">
                <p-form-item label="文章类型">
                    <j-category-select  v-model="queryParam.articleType" pcode="B03" placeholder="请选择文章类型"
                    />
                </p-form-item>
              </p-col>
              <p-col :xl="6" :lg="7" :md="8" :sm="24">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <p-button type="primary" @click="searchQuery" icon="search">查询</p-button>
                  <p-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</p-button>
                  <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <p-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                  </a>
                </span>
              </p-col>

            </p-row>
          </p-form>
        </div>
        <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <p-button @click="handleAdd" type="primary" icon="plus">新增</p-button>
      <p-button type="primary" icon="download" @click="handleExportXls('文章表')">导出</p-button>
      <p-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <p-button type="primary" icon="import">导入</p-button>
      </p-upload>


      <p-dropdown v-if="selectedRowKeys.length > 0">
        <p-menu slot="overlay">
          <p-menu-item key="1" @click="batchDel"><p-icon type="delete"/>删除</p-menu-item>
        </p-menu>
        <p-button style="margin-left: 8px"> 批量操作 <p-icon type="down" /></p-button>
      </p-dropdown>
    </div>
     <!-- table区域-begin -->
     <div>
       <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
         <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>

            <span style="float:right;">
              <a @click="loadData()"><p-icon type="sync" />刷新</a>
              <p-divider type="vertical" />
              <p-popover title="自定义列" trigger="click" placement="leftBottom">
                <template slot="content">
                  <p-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                    <p-row>
                      <template v-for="(item,index) in defColumns">
                        <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                            <p-col :span="12"><p-checkbox :value="item.dataIndex">{{ item.title }}</p-checkbox></p-col>
                        </template>
                      </template>
                    </p-row>
                  </p-checkbox-group>
                </template>
                <a><p-icon type="setting" />自定义列</a>
              </p-popover>
            </span>

       </div>
        <p-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :pagination="ipagination"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange">


          <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
              <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
              <p-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </p-button>
          </template>

          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>

            <p-divider type="vertical" />
            <p-dropdown>
              <a class="ant-dropdown-link">更多 <p-icon type="down" /></a>
              <p-menu slot="overlay">
                <p-menu-item>
                  <p-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a>删除</a>
                  </p-popconfirm>
                </p-menu-item>
              </p-menu>
            </p-dropdown>
           </span>
        </p-table>
     </div>

     <fxArticle-modal ref="modalForm" @ok="modalFormOk"></fxArticle-modal>

  </p-card>
</template>

<script>
  import { getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import FxArticleModal from './FxArticleModal'
  import Vue from 'vue'
  import JCategorySelect from '@/components/jeecg/JCategorySelect'
  import { loadCategoryData } from '@/api/api'
  import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'


  export default {
    name: 'FxArticleListRight',
    mixins: [JeecgListMixin],
    components: {
        JCategorySelect,
        FxArticleModal
    },
    props: ['value'],
    data() {
      return {
        description: '文章表管理页面',
        cardLoading: true,
        dictOptions:{},
        // 表头
        columns: [
        ],
        //列设置
        settingColumns:[],
        //列定义
        defColumns: [
          {
            title: "序号",
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
              {
                title:'创建人',
                align: 'center',
                    dataIndex: 'createBy'
              },
              {
                title:'创建日期',
                align: 'center',
                    dataIndex: 'createTime'
              },
              {
                title:'文章标题',
                align: 'center',
                    dataIndex: 'title'
              },
              {
                title:'文章类型',
                align: 'center',
                    dataIndex: 'articleType',
                    customRender: (text) => (text ? filterMultiDictText(this.dictOptions['articleType'], text) : '')
              },
              {
                title: '操作',
                dataIndex: 'action',
                align: 'center',
                scopedSlots: { customRender: 'action' }
              }
            ],
        url: {
            list: '/codedemoapi/feixuns/fxArticle/list',
            delete: '/codedemoapi/feixuns/fxArticle/delete',
            deleteBatch: '/codedemoapi/feixuns/fxArticle/deleteBatch',
            exportXlsUrl: '/codedemoapi/feixuns/fxArticle/exportXls',
            importExcelUrl: '/codedemoapi/feixuns/fxArticle/importExcel',
        },
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(articleType) {
          this.dataSource = []
          this.loadData(1, articleType)
        }
      },
    },
    computed: {
      importExcelUrl: function(){
        return `${this.url.importExcelUrl}`;
      }
    },
    created() {
       this.initColumns();
    },
    methods: {
      initColumns(){
        //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
        //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

        var key = this.$route.name+":colsettings";
        let colSettings= Vue.ls.get(key);
        if(colSettings==null||colSettings==undefined){
          let allSettingColumns = [];
          this.defColumns.forEach(function (item,i,array ) {
            allSettingColumns.push(item.dataIndex);
          })
          this.settingColumns = allSettingColumns;
          this.columns = this.defColumns;
        }else{
          this.settingColumns = colSettings;
          const cols = this.defColumns.filter(item => {
            if(item.key =='rowIndex'|| item.dataIndex=='action'){
              return true;
            }
            if (colSettings.includes(item.dataIndex)) {
              return true;
            }
            return false;
          })
          this.columns =  cols;
        }
      },
      //列设置更改事件
      onColSettingsChange (checkedValues) {
        var key = this.$route.name+":colsettings";
        Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
        this.settingColumns = checkedValues;
        const cols = this.defColumns.filter(item => {
          if(item.key =='rowIndex'|| item.dataIndex=='action'){
            return true
          }
          if (this.settingColumns.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns =  cols;
      },

      loadData(pageNum, articleType) {
        this.loading = true
        if (pageNum === 1) {
          this.ipagination.current = 1
        }
        // update-begin- --- author:wangshuai ------ date:20200102 ---- for:传过来的编码为空全查
        if (!articleType) {
          getAction(this.url.list, {
            ...this.getQueryParams()
          }).then((res) => {
            if (res.success) {
              this.dataSource = res.data.records
              this.ipagination.total = res.data.total
            }
          }).finally(() => {
            this.loading = false
            this.cardLoading = false
          })
          // update-end- --- author:wangshuai ------ date:20200102 ---- for:传过来的编码为空全查
        }else{
          //加载数据 若传入参数1则加载第一页的内容
          getAction(this.url.list, {
            articleType,
            ...this.getQueryParams()
          }).then((res) => {
            if (res.success) {
              this.dataSource = res.data.records
              this.ipagination.total = res.data.total
            }
          }).finally(() => {
            this.loading = false
            this.cardLoading = false
          })
        }
      },

      searchQuery() {
        this.loadData(1, this.value)
      },
      searchReset() {
        this.queryParam = {}
        this.loadData(1, this.value)
      },

      handleTableChange(pagination, filters, sorter) {
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        this.loadData(null, this.value)
      },
        handleCategoryChange(value,backObj){
          this.form.setFieldsValue(backObj)
        },

      // 查询类别信息
      initDictConfig(){
        loadCategoryData({code:'B03'}).then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'articleType', res.data)
          }
        })
      }
    }
  }
</script>
<style>
  .j-address-list-right-card-box .ant-table-placeholder {
    min-height: 46px;
  }
</style>
<style scoped>
  .j-address-list-right-card-box {
    height: 100%;
    min-height: 300px;
  }
</style>